<!DOCTYPE html>
<html>
	<head>
		<link rel="shortcut icon" href="icon.gif" />
		<link href="style.css" rel="stylesheet" type="text/css" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Live Tabletop</title>
		<!-- JQuery framework for DOM manipulation and Ajax -->
		<script type="text/javascript" src="jquery-1.11.1.js"></script>
		<!-- initialization and main Live Tabletop object: global LT variable -->
		<script type="text/javascript" src="js/LT.js"></script>
		<!-- panels and the objects they control (campaigns, characters, maps, users) -->
		<script type="text/javascript" src="js/Panel.js"></script><!-- LT.Panel class -->
		<script type="text/javascript" src="js/campaignPanel.js"></script>
		<script type="text/javascript" src="js/characterPanel.js"></script>
		<script type="text/javascript" src="js/mapPanel.js"></script>
		<script type="text/javascript" src="js/userPanel.js"></script>
		<!-- visual map components -->
		<script type="text/javascript" src="js/grid.js"></script>
		<script type="text/javascript" src="js/piece.js"></script>
		<script type="text/javascript" src="js/tile.js"></script>
	</head>
	<body>

		<!-- INSTALLER, should be hidden when Live Tabletop is installed -->

		<form id="installBox">
			<p>
				Live Tabletop needs to be configured to complete installation.
				The database server URL, the name of the database, and the
				username and password required to access the database will vary
				from site to site. (Live Tabletop will try to create the database
				if it does not yet exist.)	
			</p>
			<table>
				<tr><td>Database Server (URL): </td><td><input type="text" size="12" name="location"/></td></tr>
				<tr><td>Database Name: </td><td><input type="text" size="12" name="database"/></td></tr>
				<tr><td>Database Username: </td><td><input type="text" size="12" name="username"/></td></tr>
				<tr><td>Database Password: </td><td><input type="password" size="12" name="password"/></td></tr>
				<tr>
					<td colspan="2">
						<p>
							Choose a username and password for Live Tabletop
							administration. (This is not a user account.)
						</p>
					</td>
				</tr>
				<tr><td>Administrator Username: </td><td><input type="text" size="12" name="admin_login"/></td></tr>
				<tr><td>Administrator Password: </td><td><input type="password" size="12" name="admin_password"/></td></tr>
				<tr><td>Re-type Password: </td><td><input type="password" size="12" name="retype_password"/></td></tr>
			</table>
			<input type="button" value="Configure Live Tabletop"/>
		</form>

		<!-- WELCOME SCREEN -->

		<div id="welcome">
			<h1>Welcome to Live Tabletop!</h1>
			<p>
				Play tabletop roleplaying games online with your friends.<br/>
				Live Tabletop provides the game boards, pieces and dice.<br/>
				You supply the imagination, stories, rules and snacks.<br/>
				Live Tabletop is free to use and open source.
			</p>
			<iframe width="320" height="180" src="//www.youtube-nocookie.com/embed/BWAK0J8Uhzk?rel=0" frameborder="0" allowfullscreen></iframe>
			<div class="box" id="loginForm">
				<h2>Log in to Your Account</h2>
				<table>
					<tr><td>e-mail address</td><td><input type="text" name="email"/></td></tr>
					<tr><td>password</td><td><input type="password" name="password"/></td></tr>
				</table>
				<input type="button" value="log in"/>
			</div>
			or
			<div class="box collapsed" id="signupForm">
				<h2>Create a New Account</h2>
				<div>e-mail address <input type="text" name="email"/></div>
				<div>
					<input type="checkbox" checked="checked" name="subscribed" id="subscribe"/>
					<label for="subscribe">receive e-mail about Live Tabletop</label>
				</div>
				<div><input type="button" value="create account"/></div>
			</div>
			<a href="#" id="resetPasswordLink">forgot your password?</a>
			<div class="box" id="resetPasswordForm">
				<h2>Reset Password</h2>
				<p>Enter your e-mail address and we will send you a link to change your password.</p>
				<div><input type="text" name="email"/></div>
				<div><input type="button" value="send me the link"/></div>
			</div>
		</div>

		<div class="box" id="passwordForm">
			<h2>New Password</h2>
			<table>
				<tr><td>password</td><td><input type="password" name="password"/></td></tr>
				<tr><td>retype password</td><td><input type="password" name="retype_password"/></td></tr>
			</table>
			<input type="hidden" name="email"/>
			<input type="hidden" name="resetCode"/>
			<input type="button" value="set password and log in"/>
		</div>

		<div class="box" id="unsubscribeForm">
			<h2>Unsubscribed</h2>
			<p>
				<span>foo@bar.com</span> will no longer receive Live Tabletop e-mail updates
				unless you re-enable this option in your account settings.
			</p>
			<a href="#">Live Tabletop</a>
		</div>

		<!-- MAP (the campaign's current map) -->

		<div id="mapScrollSpace"></div>
		<div id="map">
			<div class="mapLayer" id="tileLayer"></div>
			<div class="mapLayer" id="wallLayer"><canvas id="grid"></canvas></div>
			<div class="mapLayer" id="pieceLayer"></div>
			<div class="mapLayer" id="fogLayer"></div>
			<div id="clickLayers">
				<div class="clickLayer" id="clickTileLayer"></div>
				<div class="clickLayer" id="clickWallLayer"></div>
				<div class="clickLayer" id="clickPieceLayer"></div>
			</div>
			<div id="cursors"></div>
		</div>

		<!-- PANELS -->

		<!-- User Panel -->
		<div class="panel" data-panel="user">
			<div class="title">
				<div class="resizeTL"></div>
				<div class="caption">User</div>
				<div class="resizeTR"></div>
				<div class="close"></div>
			</div>
			<div class="tabBar">
				<div class="tab active" data-tab="user info">My Account</div>
				<div class="tab" data-tab="user list">Friends</div>
				<div class="tab" data-tab="user sent">Sent</div>
				<div class="tab" data-tab="user received">Received</div>
			</div>
			<div class="content" data-tab="user info">
				<div>
					<span id="userName">User Name</span>
					<input id="renameUser" type="button" value="rename"/>
					<select id="userColor">
						<option>red</option>
						<option>orange</option>
						<option>yellow</option>
						<option>green</option>
						<option>blue</option>
						<option>purple</option>
						<option>black</option>
						<option>gray</option>
						<option>white</option>
						<option>pink</option>
						<option>brown</option>
					</select>
					<span class="nowrap">
						<input type="checkbox" id="userSubscribed"/>
						<label for="userSubscribed">receive e-mail updates</label>
					</span>
				</div>
				<div id="userPassword">
<!-- TODO: should we require your old password? This would require additional code support in User.password
					<input type="password" name="old_password" placeholder="old password"/>
-->
					<input type="password" name="password" placeholder="new password"/>
					<input type="password" name="retype_password" placeholder="re-type password"/>
					<input type="button" value="change password"/>
				</div>
				<div>
					<input type="button" id="logout" value="logout"/>
					<input type="button" id="defaultPanels" value="default panels"/>
				</div>
			</div>
			<div class="content" data-tab="user list">
				<div id="friendRequest">
					<input type="text" name="recipient" placeholder="email address"/>
					<input type="button" value="send friend request"/>
				</div>
				<table id="friendsConfirmed">
					<tr class="template">
						<td class="email">e-mail address</td>
						<td><input type="button" value="remove"/></td>
					</tr>
				</table>
			</div>
			<div class="content" data-tab="user sent">
				<table id="friendsRequested">
					<tr class="template">
						<td class="email">e-mail address</td>
						<td><input type="button" value="cancel"/></td>
					</tr>
				</table>
			</div>
			<div class="content" data-tab="user received">
				<table id="friendsReceived">
					<tr class="template">
						<td class="email">e-mail address</td>
						<td><input type="button" value="confirm"/><input type="button" value="reject"/></td>
					</tr>
				</table>
			</div>
			<div class="resizeBL"></div>
			<div class="resizeBR"></div>
		</div>

		<!-- Campaign Panel -->
		<div class="panel" data-panel="campaign">
			<div class="title">
				<div class="resizeTL"></div>
				<div class="caption">Campaign</div>
				<div class="resizeTR"></div>
				<div class="close"></div>
			</div>
			<div class="tabBar">
				<div class="tab active" data-tab="campaign list">List</div>
				<div class="tab" data-tab="campaign info">Info</div>
				<div class="tab" data-tab="blacklist">Blacklist</div>
				<div class="tab" data-tab="chat">Chat & Roll</div>
			</div>
			<div class="content" data-tab="campaign list">
				<div id="createCampaign">
					<input type="text" name="name" placeholder="campaign name"/>
					<input type="button" value="create campaign"/>
				</div>
				<table id="campaignList">
					<tr class="template">
						<td><a class="name">Campaign Name</a></td>
						<td class="permission">owner</td>
						<td><input type="button" value="disown" class="disown"/></td>
					</tr>
				</table>
			</div>
			<div class="content" data-tab="campaign info">
				<div>
					<span id="campaignName">campaign name</span>
					<input class="campaignOwner" id="renameCampaign" type="button" value="rename"/>
					<input type="button" id="campaignClose" value="close campaign"/>
					<span class="nowrap">
						<input class="campaignOwner" id="campaignPrivate" type="checkbox" value="private" checked="checked"/>
						<label class="campaignOwner" for="campaignPrivate">private</label>
					</span>
				</div>
				<div class="campaignOwner">
					<select name="user" id="campaignFriend"><option>My Friend</option></select>
					<input type="button" value="invite to campaign" id="campaignInvite"/>
					<input type="button" value="share campaign" id="campaignShare"/>
				</div>
				<table id="campaignUsers">
					<tr class="template">
						<td><a class="name">user name</a></td>
						<td>
							<select class="permission">
								<option value="owner">owner</option>
								<option value="member">member</option>
								<option value="guest">guest</option>
								<option value="banned">banned</option>
							</select>
							<input type="checkbox" value="viewing" readonly="readonly"/><label>viewing</label>
							<input type="button" value="friend"/>
						</td>
					</tr>
				</table>
			</div>
			<div class="content" data-tab="blacklist">
				<table id="blacklist">
					<tr class="template">
						<td><a class="email">a@b.c</a></td>
						<td><input type="button" value="remove"/></td>
					</tr>
				</table>
			</div>
			<div class="content" data-tab="chat">
				<div id="chatOutput">
					<div class="message template"><span class="time">[time]</span><span class="user"> user: </span><span class="text">message</span></div>
				</div>
				<div id="chatForm"><textarea id="chatInput"></textarea><!-- <input type="submit" value="send"/> --></div>
			</div>
			<div class="resizeBL"></div>
			<div class="resizeBR"></div>
		</div>

		<!-- Map Panel -->
		<div class="panel" data-panel="map">
			<div class="title">
				<div class="resizeTL"></div>
				<div class="caption">Map</div>
				<div class="resizeTR"></div>
				<div class="close"></div>
			</div>
			<div class="tabBar">
				<div class="tab" data-tab="map list">List</div>
				<div class="tab" data-tab="map info">Info</div>
				<div class="tab active" data-tab="map tools">Tools</div>
				<div class="tab" data-tab="piece list">Pieces</div>
				<div class="tab" data-tab="piece info">Piece Info</div>
			</div>
			<div class="content" data-tab="map list">
				<div>
					<form id="mapCreator">
						<input type="text" name="name" placeholder="map name"/>
						<input name="columns" type="text" size="2" value="25"/>
						&times;
						<input name="rows" type="text" size="2" value="25"/>
						<select name="type">
							<option value="square" selected="selected">square</option>
							<option value="hex">hex</option>
						</select>
						<input type="button" value="create map" id="createMap"/>
					</form>
				</div>
				<div id="mapListHelp">Click on a map below to make it this campaign's current map.</div>
				<div id="mapList">
					<div class="template">
						<span class="ellipsis mapListRow">
							<a class="name">Map Name</a>
							(<span class="columns">25</span>
							&times;
							<span class="rows">25</span>
							<span class="type">square</span>)&nbsp;
						</span>
						<input type="button" value="disown" class="disownMap"/>
					</div>
				</div>
			</div>
			<div class="content" data-tab="map info">
				<div>
					<span id="mapName" class="ellipsis">Map Name</span>
					<input id="renameMap" type="button" value="rename"/>
				</div>
				<div>
					<span id="mapColumns">25</span> &times; <span id="mapRows">25</span>
					<select id="mapType">
						<option value="square" selected="selected">square</option>
						<option value="hex">hex</option>
						<input type="button" value="close map" id="mapClose"/>
					</select>
				</div>
				<div id="resizeMapLeft">
					<input type="button" value="-10"/>
					<input type="button" value="-1"/>
					<input type="button" value="+1"/>
					<input type="button" value="+10"/>
					left columns 
				</div>
				<div id="resizeMapRight">
					<input type="button" value="-10"/>
					<input type="button" value="-1"/>
					<input type="button" value="+1"/>
					<input type="button" value="+10"/>
					right columns
				</div>
				<div id="resizeMapTop">
					<input type="button" value="-10"/>
					<input type="button" value="-1"/>
					<input type="button" value="+1"/>
					<input type="button" value="+10"/>
					top rows 
				</div>
				<div id="resizeMapBottom">
					<input type="button" value="-10"/>
					<input type="button" value="-1"/>
					<input type="button" value="+1"/>
					<input type="button" value="+10"/>
					bottom rows 
				</div>
				<div>
					<select id="min_zoom">
						<option value="25">25%</option>
						<option value="50">50%</option>
						<option value="100">100%</option>
						<option value="200">200%</option>
						<option value="400">400%</option>
					</select>
					-
					<select id="max_zoom">
						<option value="25">25%</option>
						<option value="50">50%</option>
						<option value="100">100%</option>
						<option value="200">200%</option>
						<option value="400">400%</option>
					</select>
					zoom
				</div>
				<div>
					<select id="min_rotate">
						<option value="-180">-180&deg;</option>
						<option value="-135">-135&deg;</option>
						<option value="-90">-90&deg;</option>
						<option value="-45">-45&deg;</option>
						<option value="0">0&deg;</option>
					</select>
					-
					<select id="max_rotate">
						<option value="180">180&deg;</option>
						<option value="135">135&deg;</option>
						<option value="90">90&deg;</option>
						<option value="45">45&deg;</option>
						<option value="0">0&deg;</option>
					</select>
					spin
					<select id="mapTilt">
						<option value="[30,90]" selected="selected">free tilt</option>
						<option value="[30,30]">side view</option>
						<option value="[90,90]">top view</option>
					</select>
				</div>
				<div>
					<select name="user" id="mapOwner"><option>My Friend</option></select>
					<input type="button" id="mapShare" value="share map"/>
				</div>
				<div id="mapOwners">
					<div class="template">
						<span class="ellipsis mapOwnerName">user name</span>
						<input class="mapOwnerRemove" type="button" value="remove owner"/>
					</div>
				</div>
			</div>
			<div class="content" data-tab="map tools">
				<div id="tools">
					<div class="swatch" data-tool="tile">tile</div>
					<div class="swatch" data-tool="fog">fog</div>
					<div class="swatch" data-tool="wall">wall</div>
					<div class="swatch selected" data-tool="piece">piece</div>
				</div>
				<div id="toolOptions">
					<div data-tool="tile">
						Click on an image below to use it as a brush.
						Click and drag on the map to paint tiles.
						<div>
							<span class="nowrap">
								<input type="checkbox" id="erase"/>
								<label for="erase">erase tiles instead of painting</label>
							</span>
						</div>
						<div id="tilePalette"></div>
					</div>
					<div data-tool="fog">
						<div>Click to toggle fog of war on map tiles. Drag to paint or erase.</div>
						<div>
							<input type="button" id="fogFill" value="cover map with fog"/>
							<input type="button" id="fogClear" value="remove all fog"/>
						</div>
					</div>
					<div data-tool="wall">
						<div>Click on grid lines to create or remove walls and doors.</div>
						<div>
							<select id="wallMode" size="4">
								<option value="wall" selected="selected">draw walls</option>
								<option value="door">create doors</option>
								<option value="open">open and close doors</option>
								<option value="none">erase walls and doors</option>
							</select>
						</div>
						<div>
							<select id="grid_thickness">
								<option value="0">none</option>
								<option value="1" selected="selected">thin</option>
								<option value="2">thick</option>
							</select>
							<select id="grid_color">
								<option>red</option>
								<option>orange</option>
								<option>yellow</option>
								<option>green</option>
								<option>blue</option>
								<option>purple</option>
								<option>black</option>
								<option>gray</option>
								<option>white</option>
								<option>pink</option>
								<option>brown</option>
							</select>
							grid
						</div>
						<div>
							<select id="wall_thickness">
								<option value="3" selected="selected">thin</option>
								<option value="6">thick</option>
							</select>
							<select id="wall_color">
								<option>red</option>
								<option>orange</option>
								<option>yellow</option>
								<option>green</option>
								<option>blue</option>
								<option>purple</option>
								<option>black</option>
								<option>gray</option>
								<option>white</option>
								<option>pink</option>
								<option>brown</option>
							</select>
							wall
						</div>
						<div>
							<select id="door_thickness">
								<option value="3" selected="selected">thin</option>
								<option value="6">thick</option>
							</select>
							<select id="door_color">
								<option>red</option>
								<option>orange</option>
								<option>yellow</option>
								<option>green</option>
								<option>blue</option>
								<option>purple</option>
								<option>black</option>
								<option>gray</option>
								<option>white</option>
								<option>pink</option>
								<option>brown</option>
							</select>
							door
						</div>
					</div>
					<div data-tool="piece">
						<div>
							Click on a piece on the map to see its properties.
							Drag a piece on the map to move it.
							Click on an image below to create a new piece.
							<div>
								<span class="nowrap">
									<input type="checkbox" checked="checked" id="snap"/>
									<label for="snap">snap pieces to grid</label>
								</span>
								<input id="newPieceURL" type="button" value="external image URL"/>
							</div>
						</div>
						<div id="pieceCreatorImages"></div>
					</div>
				</div>
			</div>
			<div class="content" data-tab="piece list">
				<div id="pieceListHelp">Click on a piece below to select it. This also selects the piece tool.</div>
				<div id="pieceList">
					<div class="template">
						<span class="ellipsis pieceListRow">
							<a class="link">
								<img class="inlineImage" src="images/piece/rogue.png"/>
								<span class="name">rogue</span>
							</a>
							at (<span class="column">1</span>,<span class="row">3</span>)
						</span>
						<input type="button" value="delete" class="pieceDelete"/>
					</div>
				</div>
			</div>
			<div class="content" data-tab="piece info">
				<div>
					<span id="pieceName" class="ellipsis"></span>
					<input id="renamePiece" type="button" value="rename piece"/>
				</div>
				<div>
					<select name="character" id="pieceCharacter">
						<option value="none">no character</option>
						<option value="new">create new character</option>
					</select>
					<input id="deletePiece" type="button" value="delete piece"/>	
				</div>
				<div>
					<select id="pieceView">
						<option value="top">top view</option>
						<option value="side">side view</option>
						<option value="front">front view</option>
						<option value="flat">flat front</option>
					</select>
					<select id="pieceDepth">
						<option value="-2">under tiles</option>
						<option value="-1">under grid</option>
						<option value="0">over grid</option>
						<option value="1">over fog</option>
					</select>
				</div>
				<div>
					<select id="pieceBaseType">
						<option value="none">do not show base</option>
						<option value="ellipse">elliptical base</option>
						<option value="rectangle">rectangular base</option>
					</select>
					<select id="pieceColor">
						<option>red</option>
						<option>orange</option>
						<option>yellow</option>
						<option>green</option>
						<option>blue</option>
						<option>purple</option>
						<option>black</option>
						<option>gray</option>
						<option>white</option>
						<option>pink</option>
						<option>brown</option>
					</select>
				</div>
				<table>
					<tr>
						<td>
							<div>
								<select id="pieceCanvasMode" class="pieceTransform" size="4">
									<option>facing</option>
									<option>scale</option>
									<option>base</option>
									<option>center</option>
								</select>
							</div>
							<div>
								<select id="pieceFacing" class="pieceTransform">
									<option value="">facing</option>
									<option value="0">up</option>
									<option value="30">30&deg; (1 o'clock)</option>
									<option value="60">60&deg; (2 o'clock)</option>
									<option value="90">right</option>
									<option value="120">120&deg; (4 o'clock)</option>
									<option value="150">150&deg; (5 o'clock)</option>
									<option value="180">down</option>
									<option value="-150">-150&deg; (7 o'clock)</option>
									<option value="-120">-120&deg; (8 o'clock)</option>
									<option value="-90">left</option>
									<option value="-60">-60&deg; (10 o'clock)</option>
									<option value="-30">-30&deg; (11 o'clock)</option>
								</select>
							</div>
							<div>
								<select id="pieceScale" class="pieceTransform">
									<option value="">scale</option>
									<option value="10">10%</option>
									<option value="15">15%</option>
									<option value="25">25%</option>
									<option value="33">33%</option>
									<option value="50">50%</option>
									<option value="75">75%</option>
									<option value="100">100%</option>
									<option value="150">150%</option>
									<option value="200">200%</option>
									<option value="300">300%</option>
									<option value="400">400%</option>
									<option value="600">600%</option>
									<option value="800">800%</option>
								</select>
							</div>
							<div>
								<select id="pieceBaseSize" class="pieceTransform">
									<option value="">base</option>
									<option value="1">1 &times; 1</option>
									<option value="2">2 &times; 2</option>
									<option value="3">3 &times; 3</option>
									<option value="4">4 &times; 4</option>
									<option value="5">5 &times; 5</option>
									<option value="6">6 &times; 6</option>
								</select>
							</div>
							<input id="pieceCenter" class="pieceTransform" type="button" value="center"/>
						</td>
						<td id="pieceCanvasWindow">
							<div id="pieceCanvasText"></div>
							<canvas id="pieceCanvas" width="150" height="150"></canvas>
						</td>
					</tr>
				</table>
				<div>
					<span class="nowrap">
						<input type="checkbox" checked="checked" id="snap2"/>
						<label for="snap2">snap pieces to grid</label>
					</span>
				</div>
				<div>
					<input id="changePieceURL" type="button" value="external image URL"/>
					<span id="pieceURL" class="ellipsis"></span>
				</div>
				<div id="pieceEditorImages"></div>
			</div>
			<div class="resizeBL"></div>
			<div class="resizeBR"></div>
		</div>

		<!-- Character Panel -->
		<div class="panel" data-panel="character">
			<div class="title">
				<div class="resizeTL"></div>
				<div class="caption">Character</div>
				<div class="resizeTR"></div>
				<div class="close"></div>
			</div>
			<div class="tabBar">
				<div class="tab active" data-tab="character list">List</div>
				<div class="tab" data-tab="character info">Info</div>
				<div class="tab" data-tab="character users">Users</div>
				<div class="tab" data-tab="character stats">Stats</div>
				<div class="tab" data-tab="character notes">Notes</div>
				<div class="tab" data-tab="character turns">Turns</div>
			</div>
			<div class="content" data-tab="character list">
				<div>
					<input id="newCharacterName" name="name" type="text" placeholder="character name"/>
					<select id="newCharacterSystem"><option value="-1">no system</option></select>
					<input id="createCharacter" type="button" value="create character"/>
				</div>
				<div id="characterList">
					<div class="template">
						<span class="characterListRow ellipsis"><a class="name">character name</a></span>
						<input class="disownCharacter" type="button" value="disown"/>
					</div>
				</div>
			</div>
			<div class="content" data-tab="character info">
				<div>
					<span id="characterName" class="ellipsis"></span>
					<input id="renameCharacter" type="button" value="rename"/>
					<select id="system"><option value="-1">no system</option></select>
				</div>
				<table>
					<tr>
						<td id="portrait"></td>
						<td id="characterPieces">
							<div><a><img class="inlineImage" src="images/piece/rogue.png"/> rogue</a> at (1,3)</div>
							<div><a><img class="inlineImage" src="images/piece/priest.png"/> priest</a> at (7,4)</div>
						</td>
					</tr>
				</table>
				<div>
					<input id="changePortraitURL" type="button" value="external portrait URL"/>
					<span id="portraitURL" class="ellipsis"></span>
				</div>
				<div id="selectPortrait"></div>
			</div>
			<div class="content" data-tab="character users">
				<div>
					<select id="newCharacterUser"><option>Player 3</option></select>
					<input id="shareCharacter" type="button" value="add owner"/>
				</div>
				<div id="characterUsers">
					<div><span class="ellipsis"><a>Player 1</a> </span><input type="button" value="remove"/></div>
					<div><span class="ellipsis"><a>Player 2</a> </span><input type="button" value="remove"/></div>
				</div>
			</div>
			<div class="content" data-tab="character stats">
				<div>Changes are not saved or shared with other users until you click save changes below.</div>
				<div id="stats">
					<div class="template">
						<input type="text" class="name" value=""/>
						<input type="text" class="value" value=""/>
						<input type="button" class="remove" value="remove"/>
					</div>
				</div>
				<div>
					<input id="addStat" type="button" value="add stat"/>
					<input id="saveStats" type="button" value="save changes"/>
				</div>
			</div>
			<div class="content" data-tab="character notes">
				<textarea id="characterNotes" name="notes"></textarea>
			</div>
			<div class="content" data-tab="character turns">
				<table id="turns">
					<tr class="template">
						<td class="name">turn name</td>
						<td><input type="button" value="up"/></td>
						<td><input type="button" value="down"/></td>
						<td><input type="button" value="rename"/></td>
						<td><input type="button" value="remove"/></td>
					</tr>
				</table>
				<div>
					<td><input id="nextTurn" type="button" value="rotate forward"/></td>
					<td><input id="previousTurn" type="button" value="rotate backward"/></td>
				</div>
				<div>
					<select><option id="turnCharacter" value="-1">no character</option></select>
					<input id="turnDescription" type="text" placeholder="description"/>
					<input id="addTurn" type="button" value="add turn"/>
				</div>
			</div>
			<div class="resizeBL"></div>
			<div class="resizeBR"></div>
		</div>


		<!-- PAGE BAR (permanent controls at the top of the page) -->

		<div id="pageBar">
			<div id="logo"></div>
			<div id="panelButtons">
				<div class="panelButton" data-panel="user">User</div>
				<div class="panelButton" data-panel="campaign">Campaign</div>
				<div class="panelButton" data-panel="map">Map</div>
				<div class="panelButton" data-panel="character">Character</div>
			</div>
			<div id="viewControls">
				<input type="button" value="-" id="zoomOut"/>
				<input type="button" value="+" id="zoomIn"/>
				<input type="button" value="&#8634;" id="rotateLeft"/>
				<input type="button" value="&#8635;" id="rotateRight"/>
				<input type="button" value="&#8593;" id="tiltUp"/>
				<input type="button" value="&#8595;" id="tiltDown"/>
			</div>
		</div>

		<div id="debug"></div>

	</body>
</html>
